<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="Description">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/prism-themes@1.9.0/themes/prism-coldark-dark.min.css">
	<style>
		.form-dropdown label {
			display: none;
			margin-right: 4px;
		}

		.hotkey {
			text-transform: uppercase;
		}

		.label-select {
			display: inline-block;
			margin-left: 4px;
		}

		.sticky-label-select {
			/* width: 100%; */
			position: fixed!important;
			top: var(--sidebar-toggle-offset-top);
			height: var(--sidebar-toggle-height);
			right: 0px;
			background: var(--sidebar-toggle-background, transparent);
			padding: 4px;
			border-radius: 4px;
			transform: translateY(-100%);
			opacity: 0.8;
			z-index: 10;
		}

		.sticky-label-select label {
			display: block;
			text-align: center;
			margin-top: -4px;
			margin-bottom: 4px;
		}
	</style>
</head>
<body>
	<div id="app"></div>

	<!-- Vue 2.x -->
	<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
	<!-- <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
	<script src="//cdn.jsdelivr.net/npm/v-scroll-threshold@2.0.0/dist/v-scroll-threshold.min.js"></script>
	<script>var thresholdPlugin = VScrollThreshold;</script>
	<script src="//cdn.jsdelivr.net/npm/vue-sticky-element@1.1.2/dist/vue-sticky-element.min.js"></script>
	<!-- Docsify v4 -->
	<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
	<!-- docsify-themeable (latest v0.x.x) -->
	<script src="//cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/prismjs@1.x/components/prism-c.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/prismjs@1.x/components/prism-cpp.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/prismjs@1.x/components/prism-ini.min.js"></script>

	<script>
		Vue.use(VScrollThreshold);

		window.$docsify = {
			name: 'GP2040',
			repo: 'https://github.com/FeralAI/GP2040/',
			homepage: 'https://raw.githubusercontent.com/FeralAI/GP2040/main/README.md',
			loadNavbar: '_navbar.md',
			themeable: {
					readyTransition : true, // default
					responsiveTables: true  // default
			},
			vueGlobalOptions: {
				directives: {
					VScrollThreshold,
					VueStickyElement,
				},
				data() {
					return {
						labelData: {
							"GP2040": { "name": "GP2040", "Up": "Up", "Down": "Down", "Left": "Left", "Right": "Right", "B1": "B1", "B2": "B2", "B3": "B3", "B4": "B4", "L1": "L1", "R1": "R1", "L2": "L2", "R2": "R2", "S1": "S1", "S2": "S2", "L3": "L3", "R3": "R3", "A1": "A1", "A2": "A2" },
							"XInput": { "name": "XInput", "Up": "Up", "Down": "Down", "Left": "Left", "Right": "Right", "B1": "A", "B2": "B", "B3": "X", "B4": "Y", "L1": "LB", "R1": "RB", "L2": "LT", "R2": "RT", "S1": "Back", "S2": "Start", "L3": "LS", "R3": "RS", "A1": "Guide", "A2": "(A2)" },
							"DirectInput": { "name": "DirectInput", "Up": "Up", "Down": "Down", "Left": "Left", "Right": "Right", "B1": "2", "B2": "3", "B3": "1", "B4": "4", "L1": "5", "R1": "6", "L2": "7", "R2": "8", "S1": "9", "S2": "10", "L3": "11", "R3": "12", "A1": "13", "A2": "14" },
							"Nintendo Switch": { "name": "Nintendo Switch", "Up": "Up", "Down": "Down", "Left": "Left", "Right": "Right", "B1": "B", "B2": "A", "B3": "Y", "B4": "X", "L1": "L", "R1": "R", "L2": "ZL", "R2": "ZR", "S1": "Minus", "S2": "Plus", "L3": "LS", "R3": "RS", "A1": "Home", "A2": "Capture" },
							"PS3":    { "name": "PS3", "Up": "Up", "Down": "Down", "Left": "Left", "Right": "Right", "B1": "Cross", "B2": "Circle", "B3": "Square", "B4": "Triangle", "L1": "L1", "R1": "R1", "L2": "L2", "R2": "R2", "S1": "Select", "S2": "Start", "L3": "L3", "R3": "R3", "A1": "(A1)", "A2": "(A2)" },
							"Arcade": { "name": "Arcade", "Up": "Up", "Down": "Down", "Left": "Left", "Right": "Right", "B1": "K1", "B2": "K2", "B3": "P1", "B4": "P2", "L1": "P4", "R1": "P3", "L2": "K4", "R2": "K3", "S1": "Select", "S2": "Start", "L3": "LS", "R3": "RS", "A1": "Home", "A2": "(A2)" },
						},
						selectedLabels: localStorage.getItem('selectedLabels') || 'GP2040',
					}
				},
			},
			vueComponents: {
				'label-selector': {
					template: `
						<VueStickyElement visibleOnDirection="disabled" class="label-select" stuckClass="sticky-label-select">
							<div class="form-dropdown">
								<select name="labelSelect" v-model="state.selectedLabels" v-on:change="setSelectedLabels">
									<option v-for="item in labelData" :key="item.name" v-bind:value="item.name">{{ item.name }}</option>
								</select>
							</div>
						</VueStickyElement>
					`,
					data() {
						return {
							state: this.$root.$data,
							labelData: this.$root.labelData,
						};
					},
					methods: {
						setSelectedLabels($event) {
							localStorage.setItem('selectedLabels', $event.target.value);
							this.$root.$data.selectedLabels = $event.target.value;
						},
					},
				},

				'hotkey': {
					props: ['buttons'],
					template: `
						<strong>
							<code class="hotkey">{{ buttons.reduce((prev, next) => prev ? prev + " + " + labelData[state.selectedLabels][next] : labelData[state.selectedLabels][next] , "") }}</code>
						</strong>
					`,
					data() {
						return {
							state: this.$root.$data,
							labelData: this.$root.labelData,
						};
					},
				},
			}
		};
	</script>
</body>
</html>
